<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
			<span class="title">检索管理</span>
			<div class="body">
				<span>申请类型:</span>
				<select class="select" v-model="line" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
					<option v-for="item in lineOption" :label="item" :value="item"></option>
				</select>
        <div class="right">
          <div class="eleinput">
    				<el-input type="text" placeholder="请输入教师名称" v-model="teaName" size="small"></el-input>
          </div>
  				<el-button type="primary" @click="nameSearch" size="small">搜索</el-button>
          <el-button type="primary" @click="clearGradeSelect" size="small">重置</el-button>
          <el-button type="primary" size="small">导出</el-button>
        </div>
			</div>
		</div>

		<div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
			<span class="title">申请列表</span>
			<div class="kong"></div>
			<el-table :data="tableData" style="100%">
				<el-table-column prop="applyerId" label="#" align="center"></el-table-column>
				<el-table-column prop="approvalTypestr" label="申请类型" align="center"></el-table-column>
				<el-table-column prop="applyer" label="申请人" align="center"></el-table-column>
				<el-table-column prop="applyTimestr" label="申请时间" align="center"></el-table-column>
				<el-table-column prop="applyerPhone" label="联系方式" align="center" :show-overflow-tooltip='true'></el-table-column>
				<el-table-column prop="approvalStatusstr" label="状态" align="center"></el-table-column>
				<el-table-column prop="approvalTypestr" label="审批意见" align="center"></el-table-column>
				<el-table-column prop="approvalTimestr" label="审批时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center">
					<template scope="scope">
						<el-button size="small">审批</el-button>
					</template>
				</el-table-column>
			</el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
		</div>

    <div class="model up">
      
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      Enline: null,
      teaName: null,
      line: null,
      lineOption: [],
      tableData: [],
      total: 0,
      page: 1,
      paging: true
    }
  },
  methods: {
    nameSearch () {
      if (this.line === '复印油纸审批') {
        this.Enline = 'copyPaper'
      } else if (this.line === '加班申请审批') {
        this.Enline = 'overtimeApply'
      } else if (this.line === '打印纸审批') {
        this.Enline = 'printingPaper'
      } else if (this.line === '校车审批') {
        this.Enline = 'schoolBus'
      } else if (this.line === '教学用品审批') {
        this.Enline = 'teachingGoods'
      } else {
        this.Enline = null
      }
      this.$http.post(this._httpUrl + 'work/approval/result', {
        applyer: this.teaName,
        approvalType: this.Enline
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tableData = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.$http.post(this._httpUrl + 'work/approval/result', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          // console.log(response.data.data)
          this.tableData = response.data.data.content
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    clearGradeSelect () {
      this.line = null
    }
  },
  mounted () {
    this.$http.post(this._httpUrl + 'work/approval/result', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.tableData = response.data.data.content
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
    this.$http.post(this._httpUrl + 'work/approval/type', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        // console.log(response.data.data)
        this.lineOption = response.data.data
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      input{
      	margin-left: 4%;
      	border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 75%;
        float: right;
        .eleinput{
          width: 25%;
          float: left;
          margin-right: 2%;
        }
      }
    }
  }
  // .eleinput{
  //   float: right;
  // }
</style>
